<template>
  <div>
    <div class="container">
      <!-- 上方按钮 -->
      <div class="handle-box">
        <span class="complaintTitle">栏目名称：</span>
        <el-input v-model="query.name" placeholder="请输入栏目名称" class="handle-input mr10"></el-input>
        <span class="complaintTitle">状态：</span>
        <el-select v-model="query.status" placeholder="请选择状态" class="handle-select mr10">
          <el-option key="0" label="启用" value="1"></el-option>
          <el-option key="1" label="禁用" value="0"></el-option>
          <!-- <el-input v-model="query.title" placeholder="栏目标题" class="handle-input mr10"></el-input> -->
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button type="primary" class="handle-del" @click="resetBtn">重置
        </el-button>
        <el-button type="primary" class="handle-del mr10" @click="addInfo">添加
        </el-button>
      </div>
      <!-- 下方按钮 -->
      <div class="handle-box">
        <el-button type="primary" class="handle-del mr10" @click="delAllSelection">
          删除
        </el-button>
      </div>
      <!-- 表格部分 -->
      <el-table :data="tableData" border class="table" :height="contentStyleObj.height" ref="multipleTable"
        header-cell-class-name="table-header" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="栏目名称" align="center"></el-table-column>
        <el-table-column prop="orderNo" label="排序"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="createTime" label="添加时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch style="display: block" v-model="scope.row.status"
              @change="changeSwitchConditionState(scope.row)">
            </el-switch>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="auditStatus" label="电子邮箱"></el-table-column>
        <el-table-column prop="auditCase" label="状态"></el-table-column> -->
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleFeedback(scope.$index, scope.row.id)">编辑</el-button>
            <el-button type="text" @click="handleResetResume(scope.$index, scope.row.id)"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="text-align: center;margin-top: 30px;">
        <el-pagination background @size-change="handleSizeChange" :current-page="query.page"
          layout="prev, pager, next, jumper, sizes, total" :total="pageTotal"
          :page-sizes="[5, 10, 20, 50, 150, 300, 500]" :page-size="query.size" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getList, newsMenuStatus, newsMenuDel } from '../../../api/columnManagement';
export default {
  name: 'resumeComplaint',
  data () {
    return {
      contentStyleObj: {
        height: ''
      },
      query: {
        name: '',
        status: '',
        page: 1,
        size: 10

      },
      tableData: [],
      multipleSelection: [],
      pageTotal: 0
    };
  },
  created () {
    this.getData();
    // 监听浏览器窗口高度的方法
    // window.addEventListener('resize', this.getHeight);
    this.getHeight();
  },
  watch: {
    '$route.query.id': function (val, oldVal) {
      this.$nextTick(() => {
        this.getData();
      })
    }
  },
  methods: {
    // 获取窗口的高度 用于适配分页一直都在最下面
    getHeight () {
      this.contentStyleObj.height = document.documentElement && document.documentElement.clientHeight - 370 + 'px';
    },
    // 获取 数据
    getData () {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      getList(this.query).then(res => {
        console.log(res);
        if (res.success) {
          res.data.records.map((item, i) => {
            if (item.status == 1) {
              item.status = true
            } else {
              item.status = false
            }

            if (item.type == 1) {
              item.type = '单文章'
            } else if (item.type == 2) {
              item.type = '文章列表'
            } else if (item.type == 3) {
              item.type = '超链接'
            }
          })
          this.tableData = res.data.records;
          this.pageTotal = res.data.total
          loading.close()
        } else {
          loading.close()
          this.$message('数据返回错误')
        }
      }).catch(err => {
        loading.close()
        // this.$message('数据返回错误')
      });
    },
    // 触发搜索按钮
    handleSearch () {
      this.$set(this.query, 'page', 1);
      this.getData();
    },
    // 多选操作
    handleSelectionChange (val) {
      console.log(val)
      this.multipleSelection = val;
    },
    resetBtn () {
      this.query = {
        name: '',
        status: '',
        page: 1,
        size: 10
      }
      this.getData();
    },
    // 批量删除
    delAllSelection () {
      if (this.multipleSelection.length == 0) {
        this.$message.error('请选择要删除的栏目')
        return false
      }
      // 二次确认删除
      this.$confirm('您要删除栏目，删除后不可恢复，是否确定操作？', '信息提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'message-logout'
      }).then(() => {
        let arr = []
        this.multipleSelection.map((item) => {
          arr.push(item.id)
        })
        newsMenuDel(arr).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.getData()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    // 分页导航
    handlePageChange (val) {
      this.$set(this.query, 'page', val);
      this.getData();
    },
    handleSizeChange (val) {
      console.log(val)
      this.query.size = val
      this.getData();
    },
    // 表格里面的状态
    changeSwitchConditionState (val) {
      console.log(val, '预定状态')
      let status
      if (val.status) {
        status = 1
      } else {
        status = 0
      }
      let obj = {
        status: status,
        id: val.id
      }
      newsMenuStatus(obj).then((res) => {
        if (res.success) {
        } else {
          this.$message.error(res.msg)
          this.getData()
        }
      }).catch(err => {
        // this.$message('数据返回错误');
      })
    },
    // 添加简历
    addInfo () {
      this.$router.push({
        path: 'modifyColumn',
        query: {
          type: 'add'
        }
      })
    },
    // 编辑
    handleFeedback (i, id) {
      this.$router.push({
        path: 'modifyColumn',
        query: {
          type: 'edit',
          id: id
        }
      })
    },
    // 删除栏目
    handleResetResume (i, id) {
      // 二次确认
      this.$confirm('您要删除栏目，删除后不可恢复，是否确定操作？', '信息提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'message-logout'
      }).then(() => {
        newsMenuDel(id.split(',')).then((res) => {
          if (res.success) {
            this.getData()
            console.log(res.data, 'success')
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    }
  }
};
</script>

<style scoped>
.complaintTitle {
    font-size: 14px;
    color: #606266;
}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 200px;
    display: inline-block;
}

/* .handle-select /deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 120px;
    display: inline-block;
} */
.handle-input {
    width: 300px;
    display: inline-block;
}
.handle-select /deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 300px !important;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 40px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.container /deep/ .el-dialog__body {
    padding: 10px 20px;
}
.footer {
    display: flex;
    justify-content: center;
}
.footer button {
    padding: 9px 30px;
}
.container /deep/ .el-dialog__header {
    border-bottom: 1px solid #e5e5ee;
}
</style>

<style>
.message-logout {
    width: 400px;
}
.message-logout .el-message-box__btns {
    text-align: center;
}
</style>
